<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>购物车</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>我的购物车</h2>
        
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>商品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="item : ${cartItems}">
                        <td>
                            <a th:href="@{'/product/detail/' + ${item.productId}}" 
                               th:text="${productMap.get(item.productId).name}">商品名称</a>
                        </td>
                        <td>￥<span th:text="${item.price}">0.00</span></td>
                        <td>
                            <div class="input-group" style="width: 150px;">
                                <button class="btn btn-outline-secondary" type="button" 
                                        th:onclick="'updateQuantity(' + ${item.id} + ', -1)'">-</button>
                                <input type="number" class="form-control text-center" 
                                       th:value="${item.quantity}" 
                                       th:onchange="'updateQuantityDirect(' + ${item.id} + ', this.value)'"
                                       min="1">
                                <button class="btn btn-outline-secondary" type="button" 
                                        th:onclick="'updateQuantity(' + ${item.id} + ', 1)'">+</button>
                            </div>
                        </td>
                        <td>￥<span th:text="${item.price * item.quantity}">0.00</span></td>
                        <td>
                            <button class="btn btn-danger btn-sm" 
                                    th:onclick="'deleteItem(' + ${item.id} + ')'">删除</button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" class="text-end"><strong>总计：</strong></td>
                        <td colspan="2">￥<span th:text="${total}">0.00</span></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        
        <div class="mt-3">
            <a th:href="@{/product/search}" class="btn btn-primary">继续购物</a>
        </div>
    </div>

    <script>
        function updateQuantity(cartId, change) {
            const input = document.querySelector(`input[onchange*="${cartId}"]`);
            const newValue = parseInt(input.value) + change;
            if (newValue < 1) return;
            updateQuantityDirect(cartId, newValue);
        }

        function updateQuantityDirect(cartId, quantity) {
            fetch(`/cart/update/${cartId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `quantity=${quantity}`
            }).then(response => response.text())
              .then(result => {
                  if(result === 'success') {
                      location.reload();
                  } else {
                      alert(result);
                  }
              });
        }

        function deleteItem(cartId) {
            if (!confirm('确定要删除这个商品吗？')) return;
            
            fetch(`/cart/${cartId}`, {
                method: 'DELETE'
            }).then(response => response.text())
              .then(result => {
                  if(result === 'success') {
                      location.reload();
                  } else {
                      alert(result);
                  }
              });
        }
    </script>
</body>
</html> 